  <template>
    <div class="container">
      <h2 style="margin-top: 20px">知识百科</h2>
      <div class="product-container">
        <!-- <div class="flex-container"> -->
        
            
          <div class="row1">
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture6.jpg')" />
                <div class="box-font">现象描述</div>
              </div>
              <div class="links-container" :data-container="1">
                <table>
                  <tbody>
                    <tr v-for="p in allProducts">
                      <td>
                        <router-link :to="{name: 'product', params: {id: p.id, container: '1'}}" class="title">{{ p.title }}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
    
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture2.jpg')" />
                <div class="box-font">总成</div>
              </div>
              <div class="links-container" :data-container="2">
                <table>
                  <tbody>
                    <tr v-for="loc in allLocations">
                      <td>
                        <router-link :to="{name: 'product', params: {id: loc.id, container: '2'}}" class="title">{{ loc.title}}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
    
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture3.jpg')"/>
                <div class="box-font">解决方法</div>
              </div>
              <div class="links-container" :data-container="3">
                <table>
                  <tbody>
                    <tr v-for="cz in allCaozuos">
                      <td>
                        <router-link :to="{name: 'product', params: {id: cz.id, container:'3'}}" class="title">{{ cz.title }}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
    
          <!-- <div class="row2">
    
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture4.jpg')" />
              </div>
              <div class="links-container" :data-container="4">
                <table>
                  <tbody>
                    <tr v-for="r in allReasons">
                      <td>
                        <router-link :to="{name: 'product', params: {id: r.id, container:'4'}}" class="title">{{ r.title }}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
    
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture5.jpg')" />
              </div>
              <div class="links-container">
                <table>
                  <tbody>
                    <tr v-for="p in allProducts">
                      <td>
                        <router-link :to="{name: 'product', params: {id: p.id, container:'5'}}" class="title">{{ p.title }}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
    
            <div class="wrapper">
              <div class="image-container">
                <img :src="require('@/assets/picture6.jpg')" />
              </div>
              <div class="links-container">
                <table>
                  <tbody>
                    <tr v-for="p in allProducts">
                      <td>
                        <router-link :to="{name: 'product', params: {id: p.id, container:'6'}}" class="title">{{ p.title }}</router-link>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div> -->
    
        <!-- </div> -->
    
      </div>
    </div>
  </template>
  
  
  
  
  <script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
      mounted () {
        this.getAllProducts()
        this.getAllLocations()
        this.getAllCaozuos()
        this.getAllReasons()
      },
      computed: {
        ...mapGetters([
          'allProducts',
          'allLocations',
          'allCaozuos',
          'allReasons'
        ])
      },
      methods: {
        ...mapActions([
          'getAllProducts',
          'getAllLocations',
          'getAllCaozuos',
          'getAllReasons'
        ])
      }
    }
  </script>
  <style>
  .container{
    /* background-color: #f7f7f7; */
    /* width: 100%; */
    /* height: 800px; */
  }
  .product-container {
    display: flex;
    justify-content: center;
    height: 100%;

    /* width: 100%; */
    /* background-color: #fafafa; */
    position: relative;
    padding: 20px;
  }
  
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  
  .row1, .row2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    gap: 2%;
  }
  
  .wrapper {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    align-items: center;
    margin: 10px;
    position: relative;
    /* width: 33.33%; */
    width: 25%;
    /* background-color: #f7f7f7; */
    /* background-color: white; */
    /* border: 1px solid #d1d1d1; */
  }
  
  .image-container {
    width: 100%;
    height: 0;
    /* padding-bottom: 56.25%; 设置图片容器高度为宽度的16:9比例 */
    padding-bottom: 40%;
    position: relative;
    overflow: hidden;
  }
  
  .image-container img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  .links-container {
    /* margin-top: 20px; */
    width: 100%;
    background-color: #f7f7f7;
    border: #d1d1d1 1px solid;
  }
  a {
    text-decoration: none; /* 去除下划线 */
    color: initial; /* 继承父元素颜色 */
    font-family: 'Microsoft YaHei';
    font-size: 15px;
    font-weight: 400;
    line-height: 2;
    text-align: left;
    text-transform: uppercase;
    display: inline-block; /* 显示为块级元素，可设置宽度和间距 */
    margin-right: 10px; /* 设置链接间距 */
  }
  a:hover {
    color: #f19112; /* 选中变色 */
  }
  a:active {
    color: inherit; /* 点击前后颜色不变 */
    text-decoration: none; /* 去除下划线 */
  }
  table{
    margin-left: auto;
    margin-right: auto;
  }
  .box-font {
    font-size: 40px;
    /* font-family:cursive; */
    font-family: STXingkai;
    color: ivory;
    position: absolute;
    z-index: 1;/*置于上层*/
    display: inline;
    /* top: 0; */
    /* right: 0; */
    bottom: 0;
    /* text-align: center; */
    left: 0;
  }
  img {
    /* position: absolute; */
    /* opacity: 0.7; */
    border-top-right-radius: 8% 20%;
  }

  </style>  